<template>
	<div class="container">
		<el-container>
			<el-container>
				<el-header class="header">
					<el-row>
						<el-col :span="4">
							<el-row>
								<el-col :offset="2" :span="5" class="logo">
									<img src="../../assets/home/logo.png">
								</el-col>
								<el-col :span="12" :offset="2" class="name" style="color: #000000;">
									<el-row>
										<el-col :span="24" class="titleName">
											中华粮网
										</el-col>
										<el-col :span="24" class="titleHref">
											www.cngrain.com
										</el-col>
									</el-row>
								</el-col>
							</el-row>
						</el-col>
						<el-col :span="18">
							<el-row>
								<el-col :span="24" class="logoNav">
									<el-menu :default-active="activeIndex2" lass="el-menu-demo" mode="horizontal"
										@select="handleSelect" text-color="#B9B9B9" active-text-color="#2A2A2A"
										style="font-weight: bold;letter-spacing: 2px;">
										<el-menu-item index="1" style="font-size: 19px;">首页</el-menu-item>
										<el-menu-item index="4" style="font-size: 19px;">会员中心</el-menu-item>
									</el-menu>
								</el-col>
							</el-row>
						</el-col>
						<el-col :span="2" class="loginBtn" style="padding-right: 3vw;">
							<el-menu default-active="1" lass="el-menu-demo" mode="horizontal" text-color="#B9B9B9"
								active-text-color="#2A2A2A" v-if="nickName!=null"
								style="font-weight: bold;letter-spacing: 2px;">
                <el-submenu index="2">
                <span slot="title" style="font-size: 19px;"> {{nickName}}</span>
                <el-menu-item index="2-1" style="font-size: 15px;text-align: center;"><span @click="signOut()">退出登录</span></el-menu-item>
                <!-- <el-menu-item index="1" style="font-size: 19px;">{{nickName}}</el-menu-item> -->
                </el-submenu>
							</el-menu>
							<el-button type="success" v-else @click="login()">登录</el-button>
						</el-col>
					</el-row>
				</el-header>
				<el-main class="main">
					<el-row>
						<el-col :span="24" class="titleBack">
							<el-row class="detail">
								<el-col :span="11" class="left">数据中心</el-col>
								<el-col :span="1" class="spans">
									<span></span>
								</el-col>
								<el-col :span="11">会员特权</el-col>
								<el-col :span="5" :offset="9" class="line top">

								</el-col>
								<el-col :span="23" class="english">
									<span>DATA</span>
									<span>CENTER</span>
									<span>SYSTEM</span>
									<span>USER</span>
									<span>LOGIN</span>
								</el-col>
								<el-col :span="5" :offset="9" class="line bottom">

								</el-col>
								<el-col :span="24" class="desction">
									从海量数据中获取最有价值的知识和信息
								</el-col>
							</el-row>
						</el-col>

					</el-row>
					<el-row>
						<el-col :span="14" :offset="5" class="mainens">
							<el-row class="titleTab">
								<el-col :span="8" :class="active == 0 ? 'active' : ''">
									<el-row @click.native="active = 0" class="spansd">
										<el-col :span="24" class="title">
											<div>一年</div>
										</el-col>
										<el-col :span="24" class="price">
											<div><span class="span">￥</span>{{data[0]*price}}</div>
										</el-col>
									</el-row>
								</el-col>
								<el-col :span="8" :class="active == 1 ? 'active' : ''">
									<el-row @click.native="active = 1" class="spansd">
										<el-col :span="24" class="title">
											<div>两年</div>
										</el-col>
										<el-col :span="24" class="price">
											<div><span class="span">￥</span>{{data[1]*price}}</div>
										</el-col>
									</el-row>
								</el-col>
								<el-col :span="8" :class="active == 2 ? 'active' : ''">
									<el-row @click.native="active = 2" class="spansd">
										<el-col :span="24" class="title">
											<div>三年</div>
										</el-col>
										<el-col :span="24" class="price">
											<div><span class="span">￥</span>{{data[2]*price}}</div>
										</el-col>
									</el-row>
								</el-col>
							</el-row>
							<el-row class="function">
								<el-table :header-cell-style="{background:'#F2F3F5'}" border :data="tableData" style="width: 90%;margin-left: 5%;margin-top: 3%;" stripe :cell-style="{padding:'20px 0','font-size':'16px'}">
									<el-table-column prop="date" label="会员权益" width="120" align="center">
									</el-table-column>
									<el-table-column prop="one" label="XLS\PNG格式数据下载" align="center">
										<template slot-scope="scope">
											<img src="../../assets/home/correct.png">
										</template>
									</el-table-column>
									<el-table-column prop="two" label="查看完整数据来源" width="150" align="center">
										<template slot-scope="scope">
											<img src="../../assets/home/correct.png">
										</template>
									</el-table-column>
									<el-table-column prop="three" label="投融数据库" width="150" align="center">
										<template slot-scope="scope">
											<img src="../../assets/home/correct.png">
										</template>
									</el-table-column>
									<el-table-column prop="four" label="基础数据库" width="150" align="center">
										<template slot-scope="scope">
											<img src="../../assets/home/correct.png">
										</template>
									</el-table-column>
									<el-table-column prop="five" label="人财网数据库" width="120" align="center">
										<template slot-scope="scope">
											<img src="../../assets/home/correct.png">
										</template>
									</el-table-column>
								</el-table>
							</el-row>
							<el-row class="shuoming">
								<el-col :span="22" :offset="1" class="explain">说明</el-col>
								<el-col :span="22" :offset="1" class="list">
									1.为防止机器爬取及恶意下载，VIP会员累计获取数据量有限，不便之处，敬请谅解。
								</el-col>
								<el-col :span="22" :offset="1" class="list">
									2.以上说明最终解释权归中华粮网-数据中心所有，若有疑问，欢迎咨询客服。
								</el-col>
								<el-col :span="22" :offset="1" class="list">
									3.因本平台产品为知识类电子产品，一旦售出，概不接受退款。如有疑问，欢迎咨询客服。
								</el-col>
								<el-col :span="6" :offset="9" class="btns">
									<el-button type="warning" @click="buy()" plain>支付</el-button>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</el-main>
			</el-container>
		</el-container>
    <div class="toast">
    	<div class="contens">
    		<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2175899561&site=qq&menu=yes">
    			在线客服
    		</a>
    	</div>
    </div>
		<el-dialog :visible.sync="buy_code" width="50%" class="buycode" @close="closeBuy">
      <div style="height: 200px;text-align: center;">
        <a href="javascript:void(0);" @click="pay(1)" style="display:block;">
        	<img src="../../assets/pay/wxPay.png" style="height: 200px;padding-left:3.25rem;float: left;" alt="" />
        </a>

        <a href="javascript:void(0);" style="display:block;"  @click="pay(2)">
        	<img src="../../assets/pay/aliPay.png" style="height: 200px;padding-right:3.25rem;float: right;" alt="" />
        </a>
      </div>

		</el-dialog>
		<el-dialog :visible.sync="wx_code" width="50%" style="text-align: center;" @close="closePay">
			<div class="buy_box" style="height: 500px;text-align: center;">
				<img :src="wxImg" style="width: 300px;padding-top:1rem;padding-left:1rem;float: left;" alt="" />
				<img src="../../assets/pay/wx.png" style="width: 200px;padding-left:3.25rem;" alt="" />
				<div>
					<el-button type="success" @click="closePay()">支付成功</el-button>
					<el-button type="info" @click="wxPayPrice()">重新支付</el-button>
				</div>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex2: '4',
				buy_code: false,
				wx_code: false,
				tableData: [{
					date: '一年',
					one: '../../assets/home/correct.png',
					two: '../../assets/home/correct.png',
					three: '../../assets/home/wrong.png',
					four: '../../assets/home/wrong.png',
					five: '../../assets/home/wrong.png'
				}, {
					date: '两年',
					one: '../../assets/home/correct.png',
					two: '../../assets/home/correct.png',
					three: '../../assets/home/wrong.png',
					four: '../../assets/home/wrong.png',
					five: '../../assets/home/wrong.png'
				}, {
					date: '三年',
					one: '../../assets/home/correct.png',
					two: '../../assets/home/correct.png',
					three: '../../assets/home/wrong.png',
					four: '../../assets/home/wrong.png',
					five: '../../assets/home/wrong.png'
				}],
				active: 0,
				username: null,
				nickName: null,
				price: 0,
				data: [
					1, 2, 3
				],
				aliInfo: null,
				wxImg: null,
				userId: null,
				url: {
					getPrice: "/web/user/getPrice",
					wxPay: "/web/wx/scanCode",
					aliPay: "/web/ali/webPay"
				},
			}
		},
		mounted() {
			if (localStorage.getItem('username')) {
				this.username = localStorage.getItem('username');
				this.nickName = localStorage.getItem('nickName');
			}
		},
		created() {
			this.userId = localStorage.getItem("userId")
			this.getPrice()
		},
		methods: {
			async aliPayPrice(data) {
				if (!data) {
					data = {
						num: this.active + 1,
						type: 2,
						userId: this.userId
					}
				}
				console.log(this.aliInfo)
				if (this.aliInfo == null) {
					let res = await this.$http.post(this.url.aliPay, data);
					this.aliInfo = res.data
					const div = document.createElement('div')
					div.innerHTML = res.data
					document.body.appendChild(div)
					document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
					document.forms[0].acceptCharset =
						'UTF-8' //保持与支付宝默认编码格式一致，如果不一致将会出现：调试错误，请回到请求来源地，重新发起请求，错误代码 invalid-signature 错误原因: 验签出错，建议检查签名字符串或签名私钥与应用公钥是否匹配
					document.forms[0].submit()
				} else {
					this.$message.warning("请刷新页面后重新支付！")
				}

			},
			closePay() {
				this.wx_code = false
				this.wxImg = null
			},
			async wxPayPrice(data) {
				if (!data) {
					data = {
						num: this.active + 1,
						type: 2,
						userId: this.userId
					}
				}
				let res = await this.$http.post(this.url.wxPay, data);
				if (res.data.result.img) {
					this.wx_code = true
					this.wxImg = res.data.result.img
				} else {
					this.$message.error("微信支付错误！")
				}
			},
			pay(value) {
				let data = {
					num: this.active + 1,
					type: 2,
					userId: this.userId
				}
				if (value == 1) {
					console.log('微信支付')
					this.buy_code = false
					this.wxPayPrice(data)
				} else {
					console.log('支付宝支付')
					this.buy_code = false
					this.aliPayPrice(data)
				}
			},

			closeBuy() {
				this.buy_code = false
			},
			buy() {
				if (this.userId != null && this.userId != 'null' && this.userId != undefined) {
					this.buy_code = true
				} else {
					this.$message.error("你还没有登录，请先登录")
					this.$router.push({
						path: '/'
					})
				}
			},
			async getPrice() {
				let res = await this.$http.get(this.url.getPrice);
				console.log(res)
				this.price = res.data.result
			},
			handleSelect(key, keyPath) {
				if (key != 4) {
					this.$router.go(-1);
				}
			},
			login() {
				this.$router.push({
					name: 'Login'
				})
			},
			signOut() {
				// 清除所有缓存
				localStorage.clear();
				this.$router.push({
					path: '/'
				})
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.container {
		width: 100vw;
		height: 100vh;
	}
  .el-menu--horizontal>.el-submenu {
    padding-top: 3vh;
  	height: 9vh;
  	line-height: 12vh;
  }
	.header {
		width: 100vw !important;
		height: 12vh !important;
		background-color: #ffffff;

		.logo {
			text-align: center;

			img {
				height: 6vh;
				margin-top: 2.5vh;
			}
		}

		.logoNav {
			// margin-top: 5vh;
		}

		.name {
			height: 7vh;
			margin-top: 3.5vh;

			.titleName {
				font-size: 125%;
				font-weight: bold;
				height: 2.5vh;
				line-height: 2.5vh;
				letter-spacing: 7px;
			}

			.titleHref {
				font-size: 70%;
				font-weight: bold;
				height: 3vh;
				line-height: 3vh;
			}
		}

		.logoTitle {
			margin-top: 2vh;
			height: 5vh;
			line-height: 5vh;
			font-weight: bold;
			font-size: 22px;
			letter-spacing: 3px;
			text-indent: 1em;
		}

		.el-menu--horizontal>.el-menu-item {
			height: 12vh;
			line-height: 12vh;
		}

		.loginBtn {

			// padding-top: 5vh;
			button {
				width: 50%;
				height: 4.5vh;
				border-radius: 2.5vh;
				// margin-top: 3.5vh;
				font-weight: bold;
				font-size: 18px;
				background-color: #1AC7B6;
			}
		}
	}
	.main {
		width: 100vw !important;
		height: 88vh !important;
		padding: 0;
		background-color: #F2F3F5;

		.titleBack {
			padding: 2vh 0;
			height: 25vh;
			background-image: url(../../assets/home/back.png);
			background-size: 100%;
			background-repeat: no-repeat;
			color: #ffffff;

			.detail {
        line-height: 8vh;
				font-size: 35px;
				font-family: "Microsoft YaHei";
				font-weight: 400;
				color: #FFFFFF;

				.left {
					text-align: right;
				}

				.spans {
					span {
						display: inline-block;
						width: 1px;
						height: 2vh;
						margin-left: calc((100% - 1px) / 2);
						background-color: #ffffff;
					}
				}

				.line {
					height: 1px;
					position: relative;

					&::after {
						content: '';
						width: 200%;
						height: 1px;
						position: absolute;
						top: 0;
						left: -50%;
						transform: scale(0.5);
						background-color: #ffffff;
					}
				}

				.top {
					margin-top: 2vh;
				}

				.english {
					letter-spacing: 3px;
					font-size: 16px;
					height: 3.5vh;
					line-height: 3.5vh;
					color: #e5e5e5;
					text-align: center;
					font-weight: 400;

					span {
						display: inline-block;
					}
				}

				.bottom {
					&::after {
						left: -45%;
					}
				}

				.desction {
					letter-spacing: 4px;
					color: #d1d1d1;
					// margin-top: 2vh;
					font-size: 18px;
					text-align: center;
					text-indent: -4em;
				}
			}
		}

		.mainens {
			// height: 60vh;
			margin-top: 2vh;
			border-radius: 15px;
			background-color: #ffffff;

			.titleTab {
				text-align: center;
				height: 8vh;
				background-color: #F2F3F5;

				.active {
					border-radius: 15px 15px 0 0;
					background-color: #ffffff;
				}

				.title {
					height: 4vh;
					line-height: 4vh;
					font-size: 20px;
					font-weight: bold;
				}

				.price {
					height: 4vh;
					line-height: 4vh;
					font-size: 20px;
					font-weight: bold;
					color: #E5B032;

					.span {
						font-size: 70%;
					}
				}
			}

			.function {
				// height: 30vh;

				div {
					font-size: 16px;
				}

				img {
					width: 20px;
					height: 20px;
				}
			}

      .shuoming{
        margin-top: 2%;
      }
			.explain {
				height: 2vh;
				line-height: 2vh;
				font-size: 18px;
				font-weight: bold;
			}

			.list {
				height: 2.5vh;
				line-height: 5vh;
				font-size: 18px;
				color: #666666;
			}

			.btns {
				height: 11.5vh;

				button {
					width: 70%;
					height: 6.5vh;
					margin-top: 2.5vh;
					color: #EBBF57;
					font-weight: bold;
					font-size: 20px;
					border-radius: 10px;
					border: 2px solid #EBBF57;
					background-color: #FCF0D8;
				}
			}
		}
	}

	.spansd {
		cursor: pointer;
	}
	.toast{
		width: 30px;
		padding: 20px;
		height: 120px;
		background-color: #FFFFFF;
		position: fixed;
		right: 0;
		bottom: calc((100vh - 195px) / 2);
		box-shadow: -1px 0px 4px 0px rgba(226, 228, 230, 0.5);
		border-radius: 11px;
		.contens{
			background-color: #1AC7B6;
			color: #FFFFFF;
			text-align: center;
			font-size: 16px;
			height: 80px;
			border-radius: 5px;
			padding: 20px 0;
		}
	}
  a {
  	text-decoration: none; //去掉下划线
  	color: inherit;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  	user-select: none;
  	-webkit-appearance: none;
  	-webkit-text-size-adjust: none;
  	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  	-webkit-touch-callout: none;
  	border-bottom: none; //去掉下边框（用text-decoration: none;没有用是时候加上）；
  	display: block;
  	color: aliceblue;
  	width: 100%;
  }
</style>
